<html>
    
    <head>
        <script src='jquery-1.3.2.min.js'>
        </script>
                <script type="text/javascript">
            // Initialise...
            var feedNow = 'http://www.tfl.gov.uk/tfl/syndication/feeds/disruptions-tube-offset-now-google-widget.xml';
            var feedWeekend = 'http://www.tfl.gov.uk/tfl/syndication/feeds/disruptions-tube-offset-weekend-google-widget.xml';
            var feedLocation = feedNow;




            // Publish the service board

            function publishBoard(url) {
                if ($("#service-board dl:hidden").length == 0) {
                    $("#content_div").load(url, fetchContent);
                }
            }

            function fetchContent() {
			    // Extract H1 text from feed and use for widget title
                var theTime = $('h1').html();
				$('#updated_time').text(theTime);
                // JQUERY INTERACTIONS
                // User clicks on a line name that has incidents associated with it
                $('#lines dd:has(.message)').prev()
                // Make the line name and status underline on hover
                .hover(

                function() {
                    $(this).css({
                        textDecoration: "underline",
                        cursor: "pointer"
                    }).next().children("h3").css({
                        textDecoration: "underline"
                    })
                },

                function() {
                    $(this).css({
                        textDecoration: "none",
                        cursor: "default"
                    }).next().children("h3").css({
                        textDecoration: "none"
                    })
                })
                // When user clicks line name, trigger line status click
                .click(function() {
                    $(this).next().click();
                });
                // User clicks on a line status or station name
                $('dd:has(.message)')
                // Make the line status / station name (and the line name if viewing lines) underline on hover
                .hover(

                function() {
                    $(this).children("h3").css({
                        textDecoration: "underline",
                        cursor: "pointer"
                    })
                },

                function() {
                    $(this).children("h3").css({
                        textDecoration: "none",
                        cursor: "default"
                    })
                }).click(function() {
                    // Create message title
                    var messageTitle = $(this).prev().html() + " line";
                    var lineClass = $(this).prev().attr("class");
                    // Prepend message title to message body
                    messageHTML = "<h3 class='" + lineClass + "'>" + messageTitle + "</h3>" + $(this).find(".message").html();
                    // Add full message into 'message-detail' span
                    $('#message-detail span').empty().append(messageHTML);
                    // Hide the service board
                    $('#service-board dl').hide();
                    // Show the message
                    $('#message-detail').fadeIn("fast");
                });
                // Close incident message
                $('.close-message').click(function() {
                    //Empty and hide the message detail			
                    $('#message-detail span').empty();
                    $('#message-detail').hide();
                    // Return to lines or stations view, depending on which tab is selected
                    $('#lines').show();
                    return false;
                });
            }
        </script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link type="text/css" rel="stylesheet" href="default.css" media="all" />
        <link type="text/css" rel="stylesheet" href="default-jquery.css" media="all"
        />
    </head>
    
    <body onLoad="publishBoard(feedLocation);">
        <h3 id="header">
            Transport for London
        </h3>
        <ul class="tabs">
            <li id="now" class="selected">
                <a href="#">
                    Now
                </a>
            </li>
            <li id="weekend">
                <a href="#">
                    This weekend
                </a>
            </li>
        </ul>
        <div id="content_div" class="js-version">
            Loading...
        </div>
		<div id="updated_time"></div>
<script type="text/javascript">
            // User clicks on tabs
            $('.tabs a').click(function() {
                $('.tabs li').attr('class', '');
                $(this).parent().attr('class', 'selected');
                if ($(this).parent().is('#weekend')) {
                    feedLocation = feedWeekend;
                } else {
                    feedLocation = feedNow;
                }
                $('#message-detail').hide();
                $('#lines').show();
                publishBoard(feedLocation);
                return false;
            });	
	</script>
		<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-12643385-1");
		pageTracker._trackPageview();
		} catch(err) {}</script>
    </body>

</html>